<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>css Nav Examples</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">

		<h1>动画导航示例</h1>
		
		<h2>Not Animated</h2>
        <nav class="nav nav1">
            <ul>
                <li>
                <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Nav Item</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
		
		<h2>Fade In and Out</h2>
		<nav class="nav nav2">
			<ul>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<h2>Slide Down #1</h2>
		<nav class="nav nav3">
			<ul>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<h2>Slide Down #2</h2>
		<nav class="nav nav4">
			<ul>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<h2>Fold Out</h2>
		<nav class="nav nav5">
			<ul>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Nav Item</a>
					<ul>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
						<li><a href="#">Subnav Item</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	
	</div>

  
</body>
</html>
